import PageContainer from '@/components/PageContainer';
import useToggle from '@/hooks/useToggle';
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import { ConfigProvider, Tabs } from '@taroify/core';
import { View } from '@tarojs/components';
import I18n from 'i18n-js';
import React from 'react';
import './index.less';
import Rooms from './rooms';

const dstyles = GStyleSheet.create({
  container: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
  },
  header: {
    backgroundColor: '#fff',
  },
  tabs: {
    display: 'flex',
    flexDirection: 'row',
  },
  tab: {
    height: '52rpx',
    lineHeight: '52rpx',
    textAlign: 'center',
    fontSize: '28rpx',
    color: '#878787',
    margin: '0 6rpx',
    padding: '0 18rpx',
    backgroundColor: '#fff',
    borderRadius: '26rpx',
  },
  activeTab: {
    backgroundColor: DynamicColors.tintColor,
    color: '#fff',
  },
  bottom: {
    height: 100,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  manageIcon: {
    width: 16,
    height: 16,
    marginRight: 10,
  },
});

const tabs: ['MY_SHARE', 'SHARED_WITH_ME'] = ['MY_SHARE', 'SHARED_WITH_ME'];

const SharedDevices = React.memo(() => {
  const styles = dstyles.style;
  const [tab, { set: setTab }] = useToggle(...tabs);

  return (
    <PageContainer title={I18n.t('DEVICE_SHARED_MANAGE')}>
      <View className='share-devices-container' style={styles.container}>
        <ConfigProvider
          theme={{
            tabsActiveColor: DynamicColors.tintColor.value,
            tabsLineWidth: '70%'
          }}
        >
          <Tabs lazyRender value={tab} onChange={setTab}>
            {tabs.map((t) => (
              <Tabs.TabPane key={t} value={t} title={I18n.t(t)}>
                <Rooms isOwner={t === 'MY_SHARE'} active={tab === t} />
              </Tabs.TabPane>
            ))}
          </Tabs>
        </ConfigProvider>
      </View>
    </PageContainer>
  );
});

export default SharedDevices;
